<template>
  <f7-page>
    <f7-navbar :title="$t('m.td1')" back-link=" "></f7-navbar>

    <div class="content-padding">
      <f7-card class="status-card">
        <img src="../static/status_success.png" alt="">
        <p>{{$t('m.td2')}}</p>
        <h3 :class="transactionInfo.sz_type === '1'?'zhang': 'die'">{{transactionInfo.sz_type === '1'?'+':'-'}}{{transactionInfo.money}} {{name}}</h3>
      </f7-card>

      <f7-card class="details-card">
        <p class="color-gray">{{$t('m.td3')}}</p>
        <p>{{transactionInfo.send_address || $t('m.td5')}}</p>
        <p class="color-gray">{{$t('m.td4')}}</p>
        <p>{{transactionInfo.get_address || $t('m.td5')}}</p>
        <div class="bottom van-hairline--top">
          <p>{{$t('m.td6')}} <span>{{type}}</span></p>
          <p>{{$t('m.td7')}} <span>{{$moment(transactionInfo.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</span></p>
          <p>{{$t('m.handlingFee')}} <span>{{transactionInfo.fee || '0.00'}} {{name}}</span></p>
          <p>{{$t('m.td8')}} <span>{{transactionInfo.content}}</span></p>
        </div>
      </f7-card>
    </div>
  </f7-page>
</template>

<script>
  import { transactionDetails } from "../api/home";

  export default {
    name: "transaction-details",
    data() {
      return {
        transactionInfo: {}
      }
    },
    computed: {
      name() {
        return this.$f7route.query.name;
      },
      type() {
        return this.$f7route.query.type;
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        transactionDetails({finance_id: this.$f7route.query.id}).then(res => {
          this.transactionInfo = res.data[0];
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    padding: 50px 10px 0!important;
    .status-card {
      text-align: center;
      padding: 100px 0 $padding20;
      position: relative;
      img {
        width: 100px;
        position: absolute;
        left: 50%;
        top: -50px;
        transform: translateX(-50%);
      }
      p {
        color: $colorGrey;
        font-size: 30px;
        padding-bottom: $padding20;
      }
      h3 {
        font-size: 40px;
        color: $dieColor;
      }
    }
    .details-card {
      padding: $padding20;
      > p {
        &:nth-child(even) {
          margin-bottom: $padding;
        }
      }
      .color-gray {
        color: $colorGrey;
        padding-bottom: 10px;
      }
      .bottom {
        /*border-top: 1px solid red;*/
        padding-top: $padding;
        p {
          color: $colorGrey;
          padding-bottom: $padding20;
          span {
            color: $colorBlack;
            margin-left: $padding20;
          }
        }
      }
    }
  }
</style>
